<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f9fa;
            color: #333;
            /* 确保页脚有足够的空间 */
            position: relative;
            min-height: 100vh;
            padding-bottom: 60px; /* 页脚高度 */
            box-sizing: border-box;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            position: relative;
            padding-bottom: 10px;
        }
        h1:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #4CAF50;
        }
        .upload-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            width: 100%;
        }
        .btn:hover {
            background-color: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .flash-messages {
            margin-bottom: 20px;
        }
        .flash-message {
            padding: 12px 15px;
            margin-bottom: 15px;
            border-radius: 5px;
            border-left: 4px solid;
        }
        .flash-message.success {
            background-color: #d4edda;
            color: #155724;
            border-color: #4CAF50;
        }
        .flash-message.error {
            background-color: #f8d7da;
            color: #721c24;
            border-color: #dc3545;
        }
        .drop-area {
            border: 2px dashed #adb5bd;
            border-radius: 10px;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            background-color: #f8f9fa;
        }
        .drop-area.active {
            border-color: #4CAF50;
            background-color: rgba(76, 175, 80, 0.1);
        }
        .drop-area.error {
            border-color: #dc3545;
            background-color: rgba(220, 53, 69, 0.05);
        }
        .drop-area p {
            margin: 0;
            font-size: 16px;
            color: #666;
        }
        .drop-area .icon {
            font-size: 48px;
            color: #adb5bd;
            margin-bottom: 15px;
        }
        .drop-area:hover {
            border-color: #4CAF50;
            background-color: rgba(76, 175, 80, 0.05);
        }
        .file-info {
            margin-top: 12px;
            padding: 10px;
            background-color: #e9f7ef;
            border-radius: 5px;
            text-align: left;
            display: none;
        }
        .file-info span {
            font-weight: 600;
            color: #2c3e50;
        }
        .or-separator {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 20px 0;
            color: #6c757d;
        }
        .or-separator::before,
        .or-separator::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #dee2e6;
        }
        .or-separator::before {
            margin-right: 10px;
        }
        .or-separator::after {
            margin-left: 10px;
        }
        .file-input-container {
            position: relative;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }
        .file-input-label {
            background-color: #e9ecef;
            color: #495057;
            padding: 12px 15px;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            text-align: center;
            transition: all 0.3s ease;
            border: 1px solid #ced4da;
        }
        .file-input-label:hover {
            background-color: #dde2e6;
        }
        .file-input {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .upload-icon {
            margin-right: 8px;
        }
        .error-text {
            color: #dc3545;
            font-size: 14px;
            margin-top: 8px;
            display: none;
        }
        .shake {
            animation: shake 0.5s;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        #system-message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            min-width: 300px;
            max-width: 80%;
            text-align: center;
            display: none;
        }
        .footer {
            text-align: center;
            padding: 15px 0;
            margin-top: 40px;
            color: #6c757d;
            font-size: 14px;
            border-top: 1px solid #eee;
        }
        .footer span {
            font-weight: 600;
            color: #2c3e50;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <h1>文件上传系统</h1>
    
    <!-- 系统消息显示区域 -->
    <div id="system-message"></div>
    
    <div class="upload-container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="flash-messages" style="display: none;">
            {% for category, message in messages %}
            <div class="flash-message {{ category }}" data-message="{{ message }}" data-category="{{ category }}">
                {% if category == 'success' %}
                <i class="fas fa-check-circle"></i>
                {% else %}
                <i class="fas fa-exclamation-circle"></i>
                {% endif %}
                {{ message }}
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        
        <form id="upload-form" action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data" onsubmit="return validateForm()">
            <div class="drop-area" id="drop-area">
                <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
                <p><strong>将文件拖放到此处</strong></p>
                <p style="margin-top: 8px; font-size: 14px; color: #888;">支持 .xls、.xlsx 和 .csv 格式</p>
                <div class="file-info" id="file-info">已选择文件: <span id="file-name"></span></div>
                <div class="error-text" id="drag-error">请选择文件后再上传</div>
            </div>
            
            <div class="or-separator">或者</div>
            
            <div class="form-group">
                <div class="file-input-container">
                    <label for="file" class="file-input-label">
                        <i class="fas fa-file-upload upload-icon"></i>点击选择文件
                    </label>
                    <input type="file" id="file" name="file" class="file-input" accept=".xls,.xlsx,.csv">
                </div>
                <div class="file-info" id="file-info-2">已选择文件: <span id="file-name-2"></span></div>
                <div class="error-text" id="file-error">请选择文件后再上传</div>
            </div>
            
            <div class="form-group">
                <button type="submit" class="btn" id="upload-button"><i class="fas fa-upload"></i> 上传文件</button>
            </div>
        </form>
    </div>
    
    <!-- 页脚 -->
    <footer class="footer">
        Powered by <span>卷包车间 王锦超</span> <i class="fas fa-code"></i> © <span id="current-year"></span>
    </footer>

    <script>
        const dropArea = document.getElementById('drop-area');
        const fileInput = document.getElementById('file');
        const fileInfo = document.getElementById('file-info');
        const fileName = document.getElementById('file-name');
        const fileInfo2 = document.getElementById('file-info-2');
        const fileName2 = document.getElementById('file-name-2');
        const form = document.getElementById('upload-form');
        const dragError = document.getElementById('drag-error');
        const fileError = document.getElementById('file-error');
        const uploadButton = document.getElementById('upload-button');
        const systemMessage = document.getElementById('system-message');
        const currentYear = document.getElementById('current-year');
        
        // 设置当前年份
        currentYear.textContent = new Date().getFullYear();

        // 处理Flash消息
        document.addEventListener('DOMContentLoaded', function() {
            const flashMessages = document.querySelectorAll('.flash-message');
            
            if (flashMessages.length > 0) {
                const lastMessage = flashMessages[flashMessages.length - 1];
                const message = lastMessage.getAttribute('data-message');
                const category = lastMessage.getAttribute('data-category');
                
                showSystemMessage(message, category);
            }
        });

        // 显示系统消息
        function showSystemMessage(message, category) {
            systemMessage.innerHTML = `
                <div class="flash-message ${category}">
                    <i class="fas fa-${category === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                    ${message}
                </div>
            `;
            systemMessage.style.display = 'block';
            
            // 3秒后淡出
            setTimeout(() => {
                systemMessage.style.opacity = '0';
                systemMessage.style.transition = 'opacity 0.5s ease';
                
                // 动画完成后隐藏
                setTimeout(() => {
                    systemMessage.style.display = 'none';
                    systemMessage.style.opacity = '1';
                }, 500);
            }, 3000);
        }

        // 验证表单
        function validateForm() {
            if (!fileInput.files.length || fileInput.files[0].name === '') {
                showError();
                showSystemMessage('请选择文件后再上传', 'error');
                return false;
            }
            return true;
        }

        // 显示错误
        function showError() {
            dropArea.classList.add('error');
            dragError.style.display = 'block';
            fileError.style.display = 'block';
            dropArea.classList.add('shake');
            
            // 移除动画类，以便下次可以再次触发
            setTimeout(() => {
                dropArea.classList.remove('shake');
            }, 500);
            
            // 3秒后移除错误状态
            setTimeout(() => {
                dropArea.classList.remove('error');
                dragError.style.display = 'none';
                fileError.style.display = 'none';
            }, 3000);
        }

        // 点击拖放区域触发文件选择
        dropArea.addEventListener('click', () => {
            fileInput.click();
        });

        // 文件选择变化时更新显示
        fileInput.addEventListener('change', (e) => {
            if (fileInput.files.length > 0) {
                const file = fileInput.files[0];
                // 移除错误状态
                dropArea.classList.remove('error');
                dragError.style.display = 'none';
                fileError.style.display = 'none';
                
                // 显示文件信息
                fileName.textContent = file.name;
                fileName2.textContent = file.name;
                fileInfo.style.display = 'block';
                fileInfo2.style.display = 'block';
                
                // 显示文件大小
                const fileSize = (file.size / 1024).toFixed(2) + ' KB';
                fileName.textContent = file.name + ' (' + fileSize + ')';
                fileName2.textContent = file.name + ' (' + fileSize + ')';
            } else {
                fileInfo.style.display = 'none';
                fileInfo2.style.display = 'none';
            }
        });

        // 拖动文件进入区域
        dropArea.addEventListener('dragenter', (e) => {
            e.preventDefault();
            e.stopPropagation();
            dropArea.classList.add('active');
        });

        // 拖动文件在区域内移动
        dropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            e.stopPropagation();
            dropArea.classList.add('active');
        });

        // 拖动文件离开区域
        dropArea.addEventListener('dragleave', (e) => {
            e.preventDefault();
            e.stopPropagation();
            dropArea.classList.remove('active');
        });

        // 放下文件
        dropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            e.stopPropagation();
            dropArea.classList.remove('active');
            
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                // 检查文件类型
                const file = files[0];
                const fileExt = file.name.split('.').pop().toLowerCase();
                if (['xls', 'xlsx', 'csv'].includes(fileExt)) {
                    fileInput.files = files;
                    // 移除错误状态
                    dropArea.classList.remove('error');
                    dragError.style.display = 'none';
                    fileError.style.display = 'none';
                    
                    // 显示文件大小
                    const fileSize = (file.size / 1024).toFixed(2) + ' KB';
                    fileName.textContent = file.name + ' (' + fileSize + ')';
                    fileName2.textContent = file.name + ' (' + fileSize + ')';
                    fileInfo.style.display = 'block';
                    fileInfo2.style.display = 'block';
                } else {
                    showSystemMessage('请上传.xls、.xlsx或.csv格式的文件', 'error');
                }
            }
        });
    </script>
</body>
</html> 